<template>
    <el-form label-position="right" size="mini" label-width="90px" class="base-attrbute">
        <el-form-item label="类型：">
            <el-radio-group v-model="data.type">
                <el-radio label="default" border>默认</el-radio>
                <el-radio label="password" border>密码框</el-radio>
                <el-radio label="textarea" border>文本域</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="是否禁用：">
            <el-radio-group v-model="data.disabled">
                <el-radio :label="true">禁用</el-radio>
                <el-radio :label="false">非禁用</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="清空：">
            <el-radio-group v-model="data.clearable">
                <el-radio :label="true">开启</el-radio>
                <el-radio :label="false">关闭</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="输入框尺寸：">
          <el-select v-model="value.size" placeholder="请设置输入框尺寸">
            <el-option label="大" value="medium"></el-option>
            <el-option label="中" value="small"></el-option>
            <el-option label="小" value="mini"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="占位提示：">
            <el-input v-model="data.placeholder" placeholder="请输入占位提示符"></el-input>
        </el-form-item>
        <el-form-item label="icon图标：" v-if="data.type != 'textarea'">
            <el-input v-model="data.icon" placeholder="请输入icon图标"></el-input>
        </el-form-item>
        <template v-if="data.type == 'textarea'">
            <el-form-item label="文本行：">
                <el-input v-model="data.rows" type="number" placeholder="请输入文本域展示行数"></el-input>
            </el-form-item>            
            <el-form-item label="自适应高度：">
                <el-radio-group v-model="data.autosize">
                    <el-radio :label="true">开启</el-radio>
                    <el-radio :label="false">关闭</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="拖拽宽高：">
                <el-radio-group v-model="data.resize" class="">
                    <el-radio label="none">禁止</el-radio>
                    <el-radio label="both">双向</el-radio>
                    <el-radio label="horizontal">水平</el-radio>
                    <el-radio label="vertical">纵向</el-radio>
                </el-radio-group>
            </el-form-item>
        </template>
    </el-form>
</template>
<script type="text/javascript">
export default {
    props:{
      value:[Array,Object,String,Number]
    },

    created() {

    },
    data() {
        return {

        }
    },
    /**
     * 计算属性
     * @type {Object}
     */
    computed: {
        data:{
          get(){
            return this.value;
          },
          set(value){
              this.$emit('input',value);
          }
        }
    },
    /**
     * 数据监听
     * @type {Object}
     */
    watch: {

    },
    /**
     * 页面加载执行
     * @return {[type]} [description]
     */
    mounted() {

    },
    /**
     * 页面方法
     * @type {Object}
     */
    methods: {

    }
}
</script>
<style type="text/css" lang="scss">
.base-attrbute {
    padding: 10px;

    .el-form-item--mini.el-form-item,
    .el-form-item--small.el-form-item {
        margin-bottom: 10px;
    }
    .el-form--label-top .el-form-item__label {
        float: none;
        display: inline-block;
        text-align: left;
        padding: 0;
    }
    .el-form-item__label,
    .el-form-item__content {
        font-size: 12px !important;
    }
    .el-form-item__content .el-radio{
      margin: 5px 0;
      margin-right: 15px;
    }
    .el-radio--mini.is-bordered,.el-radio.is-bordered+.el-radio.is-bordered{
      margin: 0px;
      margin-bottom: 10px;
      margin-right: 10px;
    }
}
</style>